<template>
  <div class="app-container">
    <div class="app-container-title">
      <OverView />
    </div>
    <div class="app-container-main">
      <div class="app-container-main-left">
        <!-- 左侧内容 -->
        <div class="app-container-main-left-discharge">
          <!-- 左侧上方内容 -->
          <itemTitle title="设备状态" />
          <LineChart height="180px" />
        </div>
        <div class="app-container-main-left-status">
          <!-- 左侧中间内容 -->
          <itemTitle title="设备状态" />
          <div class="app-container-main-left-status-content">
            <div class="app-container-main-left-status-content-left">
              <iframe
                ref="iframe"
                frameborder="0"
                width="100%"
                height="100%"
                style="width: 100%; height: 100%"
                class="iframe"
                src="https://www.czy3d.com/m/8455727527553474560"
              ></iframe>
            </div>
            <div class="app-container-main-left-status-content-right">
              <div class="app-container-main-left-status-content-right-item">
                <div class="app-container-main-left-status-content-right-item-left">
                  <img src="../../../../assets/logo/logo.svg" alt="">
                  设备名称
                </div>
                <div class="app-container-main-left-status-content-right-item-right">
                  数控机床
                </div>
              </div>
              <div class="app-container-main-left-status-content-right-item">
                <div class="app-container-main-left-status-content-right-item-left">
                  <img src="../../../../assets/logo/logo.svg" alt="">
                  设备编号
                </div>
                <div class="app-container-main-left-status-content-right-item-right">
                  09964667
                </div>
              </div>
              <div class="app-container-main-left-status-content-right-item">
                <div class="app-container-main-left-status-content-right-item-left">
                  <img src="../../../../assets/logo/logo.svg" alt="">
                  生产日期
                </div>
                <div class="app-container-main-left-status-content-right-item-right">
                  2019年10月1日
                </div>
              </div>
              <div class="app-container-main-left-status-content-right-item">
                <div class="app-container-main-left-status-content-right-item-left">
                  <img src="../../../../assets/logo/logo.svg" alt="">
                  生产单号
                </div>
                <div class="app-container-main-left-status-content-right-item-right">
                  6660066
                </div>
              </div>
              <div class="app-container-main-left-status-content-right-item">
                <div class="app-container-main-left-status-content-right-item-left">
                  <img src="../../../../assets/logo/logo.svg" alt="">
                  运行状态
                </div>
                <div class="app-container-main-left-status-content-right-item-right">
                  运行中
                </div>
              </div>
              <div class="app-container-main-left-status-content-right-item">
                <div class="app-container-main-left-status-content-right-item-left">
                  <img src="../../../../assets/logo/logo.svg" alt="">
                  运行时长
                </div>
                <div class="app-container-main-left-status-content-right-item-right">
                  10小时21分钟
                </div>
              </div>
              <div class="app-container-main-left-status-content-right-item">
                <div class="app-container-main-left-status-content-right-item-left">
                  <img src="../../../../assets/logo/logo.svg" alt="">
                  待机时间
                </div>
                <div class="app-container-main-left-status-content-right-item-right">
                  18分钟
                </div>
              </div>
              
            </div>
          </div>
        </div>
        <div class="app-container-main-left-performance">
          <!-- 左侧下方内容 -->
          <itemTitle title="设备性能分析" />
          <LineAreaChart height="230px" />
        </div>
      </div>
      <div class="app-container-main-right">
        <!-- 右侧内容 -->
        <div class="app-container-main-right-top">
          <!-- 右侧上方内容 -->
          <div class="app-container-main-right-top-left">
            <div class="app-container-main-right-top-left-top">
              <div class="app-container-main-right-top-left-top-box">
                <LiquidChart height="200px" :data="[0.782]" tooltipName="设备OEE"/>
                设备OEE
              </div>
              <div class="app-container-main-right-top-left-top-box">
                <LiquidChart height="200px" itemStyleColor="#fbaa62" backgroundStyleColor="#fcc18f" :data="[0.5]" tooltipName="生产完成率"/>
                生产完成率
              </div>
              <div class="app-container-main-right-top-left-top-box">
                <LiquidChart height="200px" itemStyleColor="#b183fb" backgroundStyleColor="#d9bbf8" :data="[0.161]" tooltipName="次品率"/>
                次品率
              </div>
            </div>
            <div class="app-container-main-right-top-left-bottom">
              <itemTitle title="设备不合格原因数量排名" />
              <RankBarChart height="320px"/>
            </div>
          </div>
          <div class="app-container-main-right-top-right">
            <div class="app-container-main-right-top-right-top">
              <itemTitle title="设备告警清单" />
              <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                  prop="address"
                  align="center"
                  label="告警内容"
                  >
                </el-table-column>
                <el-table-column
                  prop="name"
                  align="center"
                  label="告警级别"
                  >
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.name" type="danger">紧急</el-tag>
                    <el-tag v-else>一般</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="date"
                  align="center"
                  label="告警时间">
                </el-table-column>
                <el-table-column
                  prop="date1"
                  align="center"
                  label="恢复时间">
                </el-table-column>
              </el-table>
            </div>
            <div class="app-container-main-right-top-right-bottom">
              <itemTitle title="设备停机原因" />
              <div class="app-container-main-right-top-right-bottom-content">
                <!-- <div class="app-container-main-right-top-right-bottom-content-left"> -->
                  <PieChart height="180px" />
                <!-- </div>
                <div class="app-container-main-right-top-right-bottom-content-right">
                  <div class="app-container-main-right-top-right-bottom-content-right-item">
  
                  </div>
                </div> -->
              </div>
            </div>
          </div>
        </div>
        <div class="app-container-main-right-bottom">
          <!-- 右侧下方内容 -->
          <itemTitle title="设备生产统计" />
          <BarChart height="230px" />
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import itemTitle from '@/views/mes/dv/charts/components/itemTitle'
import PieChart from '@/views/mes/dv/charts/components/PieChart'
import LineChart from '@/views/mes/dv/charts/components/LineChart'
import BarChart from '@/views/mes/dv/charts/components/BarChart'
import RankBarChart from '@/views/mes/dv/charts/components/RankBarChart'
import LineAreaChart from '@/views/mes/dv/charts/components/LineAreaChart'
import LiquidChart from '@/views/mes/dv/charts/components/LiquidChart'
import OverView from '@/views/mes/dv/overview' // 设备总览组件
export default {
  name: 'Charts',
  components: {
    // 注册组件
    itemTitle,
    PieChart,
    LineChart,
    BarChart,
    RankBarChart,
    LineAreaChart,
    LiquidChart,
    OverView,
  },
  data() {
    return {
      // 数据
      tableData: [
        {
          date: '2024-05-02',
          date1: '2024-05-02',
          name: 0,
          address: '电压告警'
        }, 
        {
          date: '2024-05-18',
          date1: '2024-05-20',
          name: 0,
          address: '温度告警'
        }, 
        {
          date: '2024-06-06',
          date1: '2024-06-06',
          name: 1,
          address: '继电器故障'
        },
        {
          date: '2024-06-26',
          date1: '2024-06-26',
          name: 0,
          address: '材料不匹配'
        },
        {
          date: '2024-06-29',
          date1: '2024-06-29',
          name: 0,
          address: '温度告警'
        },
        {
          date: '2024-07-02',
          date1: '2024-07-02',
          name: 0,
          address: '电压告警'
        }
      ]
    };
  },
  methods: {
    // 方法
  }
};
</script>

<style scoped>
::v-deep.el-table th.el-table__cell.is-leaf {
  border-bottom: none;
}
::v-deep.el-table td.el-table__cell {
  border-bottom: none;
}
::v-deep.el-table .el-table__header-wrapper th {
  background-color: transparent !important;
}
::v-deep.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
</style>
<style lang="scss" scoped>
.app-container {
  padding: 0 10px 10px 10px;
  &-title{
    background-color: #e3e4e9;
  }
  &-main{
    display: flex;
    background-color: #e3e4e9;
    padding: 10px;
    &-left{
      width: 50%;
      height: 100%;
      margin-right: 15px;
      &-discharge{
        width: 100%;
        height: 240px;
        padding: 10px;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
        margin-bottom: 15px;
        
      }
      &-status{
        width: 100%;
        height: 380px;
        padding: 10px;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
        margin-bottom: 15px;
        &-content{
          display: flex;
          &-left{
            width: 60%;
            margin-right: 15px;
            iframe{
              // width: 100%;
              // height: 320px;
              border-radius: 15px;
              overflow: hidden;
            }
          }
          &-right{
            flex: 1;
            &-item{
              width: 100%;
              height: 40px;
              margin-bottom: 5px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              &-left{
                display: flex;
                align-items: center;
                img{
                  width: 25px;
                  height: 25px;
                  margin-right: 10px;
                }
              }
              &-right{
                font-size: 18px;
                font-weight: 600;
              }
            }
          }
        }
      }
      &-performance{
        width: 100%;
        height: 280px;
        padding: 10px;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
      }
    }
    &-right{
      flex: 1;
      height: 100%;
      &-top{
        width: 100%;
        height: 635px;
        // background-color: #fff;
        margin-bottom: 15px;
        display: flex;
        &-left{
          width: 50%;
          height: 100%;
          margin-right: 15px;
          &-top{
            width: 100%;
            height: 240px;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            &-box{
              width: 33%;
              height: 100%;
              text-align: center;
              background-color: #fff;
              border-radius: 15px;
              overflow: hidden;
            }
            &-box:nth-child(2){
              margin: 0 5px; 
            }
          }
          &-bottom{
            width: 100%;
            height: 380px;
            padding: 10px;
            border-radius: 5px;
            overflow: hidden;
            background-color: #fff;
          }
        }
        &-right{
          flex: 1;
          &-top{
            width: 100%;
            height: 380px;
            background-color: #fff;
            padding: 10px;
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 15px;
          }
          &-bottom{
            width: 100%;
            height: 240px;
            background-color: #fff;
            padding: 10px;
            border-radius: 5px;
            overflow: hidden;
            &-content{
              display: flex;
              &-left{
                width: 50%;
              }
              &-right{
                flex: 1;
              }
            }
          }
        }
      }
      &-bottom{
        width: 100%;
        height: 280px;
        background-color: #fff;
        padding: 10px;
        border-radius: 5px;
        overflow: hidden;
      }
    }
  }
}
</style>